import { ProTable, type ProColumns } from '@/components/Pro';
import { DATABASE_TYPE_ENUM, fetchDictInfo } from '@/utils';
import { useIntl, useModel } from '@umijs/max';
import dayjs from 'dayjs';
import React, { useEffect } from 'react';

import { envDeviceControllerGetHistoryFireHostData } from '@/services/ess/deviceEnv';

interface props {
  tabIndex?: string;
  deviceCode?: string;
}

const HistoryData: React.FC<props> = ({ deviceCode }) => {
  const intl = useIntl();
  const { initialState } = useModel('@@initialState');
  let Options_type1: any[] = [];
  let Options_online: any[] = [];
  let Options_faultstatus: any[] = [];
  let Options_sparyState: any[] = [];
  let Options_alarmState: any[] = [];

  const changeFuntion = (key: any, result: any) => {
    const array2 = ['enableState'];
    const array_onlineState = ['onlineState'];
    const array_faultState = ['faultState'];
    const array_sparyState = ['sparyState'];
    const array_alarmState = ['alarmState'];
    if (array2.includes(key)) {
      return Options_type1.find((res) => res.value === result)?.['label'] || '';
    } else if (array_sparyState.includes(key)) {
      return Options_sparyState?.find((res) => res.value === result)?.['label'] || '';
    } else if (array_alarmState.includes(key)) {
      return Options_alarmState?.find((res) => res.value === result)?.['label'] || '';
    } else if (array_onlineState.includes(key)) {
      return Options_online?.find((res) => res.value === result)?.['label'] || '';
    } else if (array_faultState.includes(key)) {
      return Options_faultstatus?.find((res) => res.value === result)?.['label'] || '';
    } else {
      return result;
    }
  };

  const columns: ProColumns<any>[] = [
    {
      title: intl.formatMessage({ id: 'data.s/N' }),
      key: 'index',
      valueType: 'index',
      fixed: 'left',
      width: 60,
      dataIndex: 'pageIndex',
    },
    {
      title: intl.formatMessage({ id: 'data.acquisitionTime' }),
      dataIndex: 'collectTime',
      key: 'collectTime',
      valueType: 'dateTimeRange',
      fixed: 'left',
      width: 100,
      initialValue: [dayjs().startOf('day'), dayjs()],
      render: (_, record) => {
        return <span>{record.ts}</span>;
      },
    },
    {
      title: intl.formatMessage({ id: 'data.reportingTime' }),
      dataIndex: 'reportTime',
      key: 'reportTime',
      valueType: 'dateTimeRange',
      fixed: 'left',
      width: 100,
      initialValue: [dayjs().startOf('day'), dayjs()],
      render: (_, record) => {
        return <span>{record.reportstTime}</span>;
      },
    },
    {
      title: intl.formatMessage({ id: 'data.deviceModel' }),
      dataIndex: 'product',
      key: 'product',
      hideInSearch: true,
      width: 100,
    },
    {
      title: intl.formatMessage({ id: 'data.deviceFactory' }),
      dataIndex: 'producer',
      key: 'producer',
      hideInSearch: true,
      width: 100,
    },
    {
      title: intl.formatMessage({ id: 'data.deviceID' }),
      dataIndex: 'fireHostCode',
      hideInSearch: true,
      width: 90,
    },
    {
      title: intl.formatMessage({ id: 'data.onlineStatus' }),
      dataIndex: 'onlineState',
      hideInSearch: true,
      width: 100,
      render: (_, record) => {
        return changeFuntion('onlineState', record.onlineState);
      },
    },
    {
      title: intl.formatMessage({ id: 'stationRealtimeMonitoring.isEnable' }),
      dataIndex: 'enableState',
      hideInSearch: true,
      width: 100,
      render: (_, record) => {
        return changeFuntion('enableState', record.enableState);
      },
    },
    {
      title: intl.formatMessage({ id: 'stationRealtimeMonitoring.faultStatus' }),
      dataIndex: 'faultState',
      hideInSearch: true,
      width: 100,
      render: (_, record) => {
        return changeFuntion('faultState', record.faultState);
      },
    },
    {
      title: intl.formatMessage({ id: 'stationRealtimeMonitoring.fireAlarmSignal' }),
      dataIndex: 'alarmState',
      hideInSearch: true,
      width: 120,
      render: (_, record) => {
        return changeFuntion('alarmState', record.alarmState);
      },
    },
    {
      title: intl.formatMessage({ id: 'stationRealtimeMonitoring.faultSignal' }),
      dataIndex: 'faultState',
      hideInSearch: true,
      width: 100,
      render: (_, record) => {
        return changeFuntion('faultState', record.faultState);
      },
    },
    {
      title: intl.formatMessage({ id: 'stationRealtimeMonitoring.sprayStatus' }),
      dataIndex: 'sparyState',
      hideInSearch: true,
      width: 100,
      render: (_, record) => {
        return changeFuntion('sparyState', record.sparyState);
      },
    },
  ];
  const scroll = {
    x: 'max-content',
  };
  useEffect(() => {
    Promise.all([
      fetchDictInfo(DATABASE_TYPE_ENUM.ENABLE_DEVI, true),
      fetchDictInfo(DATABASE_TYPE_ENUM.SPARYSTATE, true),
      fetchDictInfo(DATABASE_TYPE_ENUM.DEHUMIDIFICATION_ALARM_STATE, true),
      fetchDictInfo(DATABASE_TYPE_ENUM.ONLINE_STATUS, true),
      fetchDictInfo(DATABASE_TYPE_ENUM.DEHUMIDIFICATION_FAULT_STATE, true),
    ]).then((res) => {
      let length = res.length;
      Options_type1 = res[0];
      Options_sparyState = res[1];
      Options_alarmState = res[2];
      Options_online = res[length - 2];
      Options_faultstatus = res[length - 1];
    });
  }, []);
  return (
    <div>
      <ProTable
        search={{
          labelWidth: 80,
        }}
        columns={columns}
        scroll={scroll}
        request={async (value) => {
          const params = {
            stationId: initialState?.stationId,
            current: value.current,
            pageSize: value.pageSize,
            deviceCode: deviceCode,
            collectStartTime: value.collectTime ? value.collectTime[0] : undefined,
            collectEndTime: value.collectTime ? value.collectTime[1] : undefined,
            reportStartTime: value.reportTime ? value.reportTime[0] : undefined,
            reportEndTime: value.reportTime ? value.reportTime[1] : undefined,
          };
          let reslut = await envDeviceControllerGetHistoryFireHostData(params);
          return reslut;
          // return await envDeviceControllerGetHistoryAirCoolData(params);
        }}
        toolBarRender={() => []}
        customToolBarClass="global-tabs-custom-tools"
      ></ProTable>
    </div>
  );
};

export default HistoryData;
